<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData" :loading="pageloading">
    <template v-slot:RollingTop>
      <z-tab :tabList="tabList" @click="onClickTab($event)"></z-tab>
      <div>
        <z-search v-if="selected === '寄存统计'" placeholder="请输入会员姓名/手机号/酒水名称" v-model="WineStoreStatForm.keyWord"
          @query="onQueryStoreStat" style="padding-bottom: 0" @update:model-value="onUpdateVal"></z-search>
          <z-search v-if="selected === '回收订单'" placeholder="请输入名称/桌号/回收人" v-model="WineRecoveryRecordData.keyWord"
          @query="onQueryStoreStat" style="padding-bottom: 0" @update:model-value="onUpdateVal"></z-search>
        <z-search v-if="selected === '回收统计'" placeholder="请输入会员姓名/手机号/酒水名称" v-model="returnForm.goodsName"
          @query="onQueryStoreStat" style="padding-bottom: 0" @update:model-value="onUpdateVal"></z-search>
          <div class="records-container-header" v-if="selected === '回收订单'"> 
            <div :class="{ 'container-header-item': true, active: stateActive == k }" v-for="(v, k) in stateList" :key="k" @click="onCheck(k)">
                {{ v.name }}
            </div>
        </div>
      </div>
    </template>
    <template #extension>
      <div v-show="selected === '寄存统计' || selected === '回收统计'">
        <TimeChange @select="onSelectTimeChange"></TimeChange>
      </div>
    </template>

    <div class="onWine-container">
      <div class="onWine-container-main" v-show="selected === '存取订单'">
        <div class="onWine-container-state_mar">
          <div class="onWine-container-state">
            <div class="onWine-state-item" @click="onChangeState(0)" :class="{ active: currentIndex === 0 }" v-has-role="'waiter-storeTakeWine-order-store-prepare'" >
              <div class="state-item-value">{{ allShow.unAuditedCount }}</div>
              <div class="state-item-title">待寄存</div>
            </div>
            <div class="onWine-state-item" @click="onChangeState(2)" :class="{ active: currentIndex === 2 }" v-has-role="'waiter-storeTakeWine-order-store'">
              <div class="state-item-value">{{ allShow.unReceiveCount }}</div>
              <div class="state-item-title">待领取</div>
            </div>
            <div class="onWine-state-item" @click="onChangeState(3)" :class="{ active: currentIndex === 3 }" v-has-role="'waiter-storeTakeWine-order-ake'">
              <div class="state-item-value">{{ allShow.receiveCount }}</div>
              <div class="state-item-title">已领取</div>
            </div>
            <div class="onWine-state-item" @click="onChangeState(99)" :class="{ active: currentIndex === 99 }" v-has-role="'waiter-storeTakeWine-order-expire-soon'">
              <div class="state-item-value">{{ allShow.beExpireCount }}</div>
              <div class="state-item-title" v-show="currentIndex !== 99">
                将过期
              </div>
              <div class="state-item-allDelay" v-show="currentIndex === 99" @click.stop="onPopup('延期全部')" v-has-role="'waiter-storeTakeWine-order-all-delay'">
                全部延期
              </div>
            </div>
            <div class="onWine-state-item" @click="onChangeState(4)" :class="{ active: currentIndex === 4 }" v-has-role="'waiter-storeTakeWine-order-expire'">
              <div class="state-item-value">{{ allShow.expireCount }}</div>
              <div class="state-item-title" v-show="currentIndex !== 4">
                已过期
              </div>
              <div class="state-item-allDelay" v-show="currentIndex === 4" @click.stop="openConfiscate" v-has-role="'waiter-storeTakeWine-order-all-recycle'">
                全部充公
              </div>
            </div>
            <div class="onWine-state-item" @click="onChangeState(9)" :class="{ active: currentIndex === 9 }" v-has-role="'waiter-storeTakeWine-order-refuse'">
              <div class="state-item-value">{{ allShow.rejectCount }}</div>
              <div class="state-item-title">已拒绝</div>
            </div>
            <div class="onWine-state-all" @click="onChangeState(6)" :class="{ activeAll: currentIndex === 6 }" v-has-role="'waiter-storeTakeWine-order-all'">
              全部订单
            </div>
          </div>
        </div>

        <!-- <div class="onWine-container-center">
          <div class="onWine-center-time">过期日期</div>
          <div @click="timeShow = true" class="onWine-center-timeText">
            {{ timeText }}
            <div class="time-icon"></div>
          </div>
          <div class="onWine-center-item" @click="confiscate = true">
            全部充公
          </div>
          <div class="onWine-center-item" @click="onPopup('延期全部')">
            全部延期
          </div>
        </div> -->
        <div class="onWine-container-search">
          <z-search placeholder="请输入会员姓名/手机号/存取单号" v-model="postForm.keyWord" @query="onQuery"
            @update:model-value="onUpdateVal" />
        </div>
        <div class="onWine-container-main1">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
            <div class="onWine-main-item" v-for="(item, index) in Info" :key="index"
              @click="goToDetails(item.itemCode, item.state)">
              <div class="item-title">
                <div class="item-title-name">{{ item.memberName }}</div>
                <div class="item-title-state" :class="{
                  active: item.state === '0' || item.state === '2',
                  active1: item.state === '4' || item.state === '9'
                }">
                  {{ item.stateName }}
                </div>
              </div>
              <div class="item-wine" v-for="(item1, index1) in item.goods" :key="index1">
                <div class="item-wine-top">
                  <div class="item-wine-name">{{ item1.goodsName }}</div>
                  <div class="item-wine-num">
                    x
                    <span v-if="item.state != '2' && item.state != '5' && item.state != '3'">{{ item1.currentQty }}</span>
                    <span v-if="item.state == '3' || item.state == '2'">{{ item1.takeQty }}</span>
                    <span v-if="item.state == '5'">{{ item1.recoveryQty }}</span>
                  </div>
                </div>
                <div class="item-wine-below">
                  <div class="item-wine-expireDate">
                    到期时间：{{ item1.expireDate }}
                  </div>
                </div>
              </div>
              <ul>
                <li class="item-tableId">
                  <div class="item-left">桌号</div>
                  <div class="item-right">{{ item.roomName }}</div>
                </li>
                <li class="item-id">
                  <div class="item-left">存取单号</div>
                  <div class="item-right">{{ item.itemCode }}</div>
                </li>
                <li class="item-phone">
                  <div class="item-left">会员手机号</div>
                  <div class="item-right">{{ item.memberMobile }}</div>
                </li>
                <li class="item-timeStart">
                  <div class="item-left">寄存时间</div>
                  <div class="item-right">
                    {{ dayjs(item.storeDate).format('YYYY-MM-DD') }}
                    {{ dayjs(item.storeDate).format('HH:mm:ss') }}
                  </div>
                </li>

                <li class="item-receive" v-if="item.state === '3'">
                  <div class="item-left">领取时间</div>
                  <div class="item-right">
                    {{ dayjs(item.takeDate).format('YYYY-MM-DD') }}
                    {{ dayjs(item.takeDate).format('HH:mm:ss') }}
                  </div>
                </li>
                <li class="item-receive" v-if="item.state === '2'">
                  <div class="item-left">申领时间</div>
                  <div class="item-right">
                    {{ dayjs(item.applyDate).format('YYYY-MM-DD') }}
                    {{ dayjs(item.applyDate).format('HH:mm:ss') }}
                  </div>
                </li>
                <li class="item-receive" v-if="item.state === '9'">
                  <div class="item-left">拒绝时间</div>
                  <div class="item-right">
                    {{ dayjs(item.rejectDate).format('YYYY-MM-DD') }}
                    {{ dayjs(item.rejectDate).format('HH:mm:ss') }}
                  </div>
                </li>
                <li class="item-photo">
                  <div class="item-left">酒水照片</div>
                  <div class="item-photo-look" @click.stop="OnShowImage(index)">
                    查看
                  </div>
                </li>
                <li class="item-positon">
                  <div class="item-left">寄存位置</div>
                  <div class="item-right">{{ item.storePostionName }}</div>
                </li>
              </ul>
              <div class="item-footer">
                <div class="item-footer-two" v-show="item.state === '0'"
                  @click.stop="onBtn(item.itemCode, '拒绝', item.state)">
                  拒绝
                </div>
                <div class="item-footer-six" v-show="item.state === '3' || item.state === '1'"
                  @click.stop="onBtn(item.itemCode, '补打寄存小票', item.state)">
                  补打寄存小票
                </div>
                <div class="item-footer-two" v-show="item.state === '1' || item.state === '4'" v-if="dayjs(item.goods[0].expireDate).isBefore(dayjs())"
                  @click.stop="onBtn(item.itemCode, '充公', item.state)">
                  过期回收
                </div>
                <div class="item-footer-two" v-show="item.state === '1' || item.state === '4'" 
                  @click.stop="onBtn(item.itemCode, '延期', item.state)">
                  延期
                </div>
                <div class="item-footer-four" style="color: #FFAA00;" v-show="item.state === '0'"
                  @click.stop="onBtn(item.itemCode, '确认寄存', item.state)">
                  确认寄存
                </div>
                <div class="item-footer-four" v-show="item.state === '2'"
                  @click.stop="onBtn(item.itemCode, '确认领取', item.state)">
                  确认领取
                </div>
                <div class="item-footer-four" v-show="item.state === '9'"
                  @click.stop="onBtn(item.itemCode, '修改存酒', item.state)" v-has-role="'waiter-storeTakeWine-order-edit'">
                  修改存酒
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </div>
      <div class="onWine-container-main" v-show="selected === '回收订单'">
        <div class="onWine-container-main1" style="padding-top: 20px;">
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
                          <div class="recycle-container" v-for="(item,index) in WineRecoveryRecordList" :key="index"> 
                    <div class="flex-bwt">
                           <div class="time">{{ item.recoveryDate }}</div>
                           <div class="status">{{ item.stateDesc }}</div>
                    </div>
                    <div class="M01">{{ item.roomName }}</div>
                    <div class="flex-js-felx">
                         <div class="prductName1">{{ item.goodsName }}</div>
                         <div class="unti">x{{ item.recoveryQty }}{{ item.uomName }}</div>
                    </div>
                    <div class="recyName">回收人: <span style="color: #fff;">{{ item.recoveryUserName }}</span> </div>
                     <img class="recyImg" v-if="item.attachment" :src="item.attachment" alt="">
                     <img class="recyImg" v-else src="https://oss.jtmckj.com/backend/Organize/H5morentu.png" alt="">
                     <div class="item-footer">
                      <template v-if="item.state == '0'"> 
                        <div class="item-footer-two" @click="opcoveWineState(item.code,2)">拒绝</div>
                        <div class="item-footer-two" @click="opcoveWineState(item.code,1)" style="color:rgb(255, 170, 0) ;">确认回收</div>
                      </template>
                      <template v-if="item.state == '1' "> 
                        <div   style="color:rgb(255, 170, 0) ;background: none;">审核通过</div>
                      </template>
                      <template v-if="item.state == '2' "> 
                        <div   style="color:rgb(255, 170, 0) ;background: none;">已拒绝</div>
                      </template>
              </div>

              </div>
          </van-list>
         
        </div>
      </div>
      <div class="onWine-container-main2" v-show="selected === '寄存统计'">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
          <div class="onWine-main-item" v-for="(item, index) in Info2" :key="index">
            <div class="item-title">
              <z-image :src="item.imgs[0]" size="40" class="item-zimage" style="border-radius: 4px;" />
              <div class="item-title-right">
                <div class="title-right-name">{{ item.goodsName }}</div>
              </div>
            </div>
            <div v-for="(v, k) in item.goodsItems" :key="k">
              <div class="item-center" :class="{ padTop: !v.isFull && item.goodsItems.length === 1 }"
                :style="{ 'padding-top': v.isFull ? '0' : '24px' }">
                <div :class="v.isFull ? 'title-right-state' : 'title-right-stateBelow'">{{ v.isFull ? '整瓶' : '非整瓶' }}
                </div>
                <div class="item-center-title">总寄存剩余数量：</div>
                <div class="item-center-value">{{ v.residueCount }}瓶</div>
              </div>
              <div class="item-value">
                <div class="item-value-block">
                  <div class="item-value-num">{{ v.storeCount }}</div>
                  <div class="item-value-name">寄存数量</div>
                </div>
                <div class="png-line"></div>
                <div class="item-value-block">
                  <div class="item-value-num">{{ v.takeCount }}</div>
                  <div class="item-value-name">领取数量</div>
                </div>
                <div class="png-line"></div>
                <div class="item-value-block">
                  <div class="item-value-num">{{ v.recoveryCount }}</div>
                  <div class="item-value-name">充公数量</div>
                </div>
              </div>
            </div>

          </div>
        </van-list>
      </div>

      <div class="onWine-container-main3" v-show="selected === '回收统计'">

        <div class="performance-container-select">
          <div class="select-item" @click="capacityShow = true">
            {{ capacityObj.text }}
            <div class="select-item-icon"></div>
          </div>
        </div>

        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
          <div class="onWine-main-item" v-for="(item, index) in Info3" :key="index">
            <img class="onwine-img" src="@/assets/images/onwine/wain.png" alt="">
            <div class="onWine-main-right-box">
              <div class="onWine-title">{{ item.goodsName }}</div>
              <div class="onWine-content-box">
                <div class="type">{{ item.fullTypeDesc }}</div>
                <div class="num_size"><span class="color-FFAA00">{{ item.recoveryQty }}</span> {{ item.uomName }}</div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </page-wrap>
  <!-- <z-popup
    :show="timeShow"
    position="bottom"
    close-on-click-overlay
    style="border-radius: 24px 24px 0px 0px"
    class="popup"
    @close="confirmOn"
  >
    <van-date-picker
      v-model="currentDate"
      :columns-type="columnsType"
      @cancel="onCancel"
      @confirm="onConfirm"
      title="过期日期"
    />
  </z-popup> -->
  <!-- 图片查看 -->
  <van-image-preview v-model:show="showImage" :images="images" @change="onChange" closeable>
    <template v-slot:index>第{{ index + 1 }}张</template>
  </van-image-preview>
  <!-- 全部充公提示 -->
  <z-dialog v-model:show="confiscate" @confirm="onConfiscate" align="center" title="提示" content="确认要全部充公吗？"></z-dialog>
  <!-- 全部延期 -->
  <z-popup v-model:show="winePopup" style="overflow: 'hidden'" title="延期">
    <div class="popup-container">
      <div class="popup-main">
        <div class="popup-main-extension">
          <div>确认{{ popupContent }}酒水？</div>
        </div>
        <div class="popup-main-extensionDay">
          <div class="popup-item-title">延期天数</div>
          <van-field v-model="delayDay" placeholder="请输入天数" type="number" />
          <div class="popup-item-icon">天</div>
        </div>
      </div>
      <div class="popup-footer">
        <z-button-group class="button-group">
          <z-button @click="winePopup = false" plain style="width: 120px">取消</z-button>
          <z-button @click="onExtension" style="width: 120px">确定</z-button>
        </z-button-group>
      </div>
    </div>
  </z-popup>
  <!-- 防误触弹窗 -->
  <z-popup v-model:show="wineTouch" style="overflow: 'hidden'" title="提示">
    <div class="popup-container" style="min-width: 300px">
      <div class="popup-main">
        <div class="popup-main-extension">
          <div>确认{{ winePopupTitle }}？</div>
        </div>
      </div>
      <div class="popup-footer">
        <z-button-group class="button-group">
          <z-button @click="wineTouch = false" plain style="width: 120px">取消</z-button>
          <z-button @click="onConfirmTouch" style="width: 120px">确定</z-button>
        </z-button-group>
      </div>
    </div>
  </z-popup>

  <z-picker v-model:show="capacityShow" :columns="capacityColumns" title="容量"
    @confirm="onWaiterConfirm($event, 'department')" />
</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import ls from '@/lib/ls'
import { showImagePreview, showToast } from 'vant'
import { reactive } from 'vue'
import { transformWorkTime } from '@/utils/chenhao'
import useAppStore from '@/store/app'


const router = useRouter()
const appStore = useAppStore()
// 获取登录的服务员账户
const account = ref(appStore.user_info)
// 已寄存按待领取来
const allShow = ref({}) // 存取订单统计
const Info = ref([]) // 存取订单订单数据
const Info2 = ref([]) // 寄存统计订单信息
const Info3 = ref([]) // 回收统计订单信息

// ----------------------------------------------------存取订单、寄存统计切换--------------------------------------------------------
const selected = ref('存取订单')
const tabList = ref([{ name: '存取订单' }, { name: '回收订单' }, { name: '寄存统计' }, { name: '回收统计' }])
const onClickTab = e => {
  console.log(e.target.innerText);
  const userMenu = ls.get('userMenu'); // 获取 userMenu
  switch (e.target.innerText) {
    case '存取订单':
      if(!userMenu ||!userMenu.includes('waiter-storeTakeWine-order')){
        showToast('暂无权限')
        return
      }
      break;
  
    case '寄存统计':
    if(!userMenu ||!userMenu.includes('waiter-storeTakeWine-stat')){
        showToast('暂无权限')
        return
      }
      break;
    case '回收订单':
    if(!userMenu ||!userMenu.includes('waiter-storeTakeWine-stat')){
        showToast('暂无权限')
        return
      }
      break;
    case '回收统计':
    if(!userMenu ||!userMenu.includes('waiter-storeTakeWine-recycle')){
        showToast('暂无权限')
        return
      }
      break;
  }
  selected.value = e.target.innerText
  loadData(true)
}
// -----------------------------------------------------跳转到详情页-------------------------------------------------------
const goToDetails = (itemCode, state) => {
  if (state === '3') {
    router.push({
      path: '/onwine/content',
      query: {
        itemCode: itemCode,
        isTake: 1, // 是否获取已领取数据
        source: source.value
      }
    })
  } else {
    router.push({
      path: '/onwine/content',
      query: {
        itemCode: itemCode,
        source: source.value
      }
    })
  }
}
// -----------------------------------------------------搜索-------------------------------------------------------
// 存取订单的搜索
const onQuery = () => {
  loadData(true)
}
// 寄存统计的搜索
const onQueryStoreStat = () => {
  loadData(true)
}
const searchTimer = ref(null)
const onUpdateVal = val => {
  clearTimeout(unref(searchTimer))
  searchTimer.value = setTimeout(() => {
    loadData(true)
  }, 500)
}
// -----------------------------------------------------状态筛选-------------------------------------------------------
const source = ref('') // 来源 用来判断详情页的已领取订单是来自已领取还是全部订单
const currentIndex = ref(0)
const onChangeState = val => {
  currentIndex.value = val
  if (val === 6) {
    postForm.state = ''
    source.value = 1
  } else {
    postForm.state = val
    source.value = 2
  }
  loadData(true)
}
// ---------------------------------------------------------延期弹窗、全部充公弹窗-----------------------------------------------------------
const popupContent = ref('') // 延期的提示内容
const delayDay = ref('') // 延期天数
const onPopup = val => {
  if (!allShow.value.beExpireCount) {
    showToast('暂无数据可更新')
    return
  }
  winePopup.value = true
  popupContent.value = val
}
// 全部充公弹窗
const openConfiscate = () => {
  if (!allShow.value.expireCount) {
    showToast('暂无数据可更新')
    return
  }
  confiscate.value = true
}
//------------------------------------------------------全部充公、延期--------------------------------------------------------------------
const winePopup = ref(false) // 延期弹窗
const confiscate = ref(false) // 充公弹窗
const updateWineStateForm = reactive({
  delayDay: '', // 输入的天数
  opType: '', // 操作类型(1:状态 2:延长天数)
  userName: account.value.userName
})
// 全部充公
const onConfiscate = () => {
  updateWineStateForm.opType = '1'
  updateWineStateForm.delayDay = '' // 把延期时间清空
  const batchOpWineStore = Api.Common.AppObjProcess.Do({
    functionName: 'batchOpWineStore',
    contentData: updateWineStateForm
  })
    .then(res => {
      showToast('全部充公成功')
      loadData(true)
      getWineStoreTakeStat()
    })

  confiscate.value = !confiscate.value
}
// 全部延期 或 延期
const onExtension = () => {
  // 延期时间应存在并且为整数
  if (delayDay.value < 1 || !Number.isInteger(Number(delayDay.value))) {
    showToast('延期时间应为整数')
    return
  }
  btnForm.delayDay = delayDay.value // 延期表单延期时间
  updateWineStateForm.delayDay = delayDay.value // 全部延期表单延期时间
  updateWineStateForm.opType = '2'
  if (popupContent.value === '延期全部') {
    const batchOpWineStore = Api.Common.AppObjProcess.Do({
      functionName: 'batchOpWineStore',
      contentData: updateWineStateForm
    })
      .then(res => {

        loadData(true)
        getWineStoreTakeStat()
      })

  } else {
    const OpWineStore = Api.Common.AppObjProcess.Do({
      functionName: 'OpWineStore',
      contentData: btnForm
    })
      .then(res => {
        loadData(true)
        getWineStoreTakeStat()
      })

  }

  winePopup.value = false
  delayDay.value = '' // 延期时间清空
}

// ------------------------------------------------------按钮(拒绝、确认寄存、充公、延期等)-------------------------------------------------------
const btnForm = reactive({
  itemCode: '', // ID
  state: '', // 待寄存 = 0,已寄存 = 1,待领取 = 2,已领取 = 3,已过期 = 4,已充公回收 = 5,已拒绝 = 9
  opType: '', // 操作类型(1:状态 2:延长天数)
  delayDay: '', // 延期天数
  userName: account.value.userName
})
const onBtn = (id, val, state) => {
  console.log(id, val, state);
  btnForm.state = state
  btnForm.itemCode = id
  switch (val) {
    case '拒绝':
      btnForm.opType = 1
      btnForm.state = 9
      wineTouch.value = true
      winePopupTitle.value = '拒绝'
      break
    case '确认寄存':
      btnForm.opType = 1
      btnForm.state = 1
      wineTouch.value = true
      winePopupTitle.value = '寄存'
      break
    case '充公':
      btnForm.opType = 1
      btnForm.state = 5
      wineTouch.value = true
      winePopupTitle.value = '充公'
      break
    case '延期':
      btnForm.opType = 2
      btnForm.state = ''
      winePopup.value = true
      popupContent.value = '延期该'
      break
    case '补打寄存小票':
      btnForm.opType = -1
      wineTouch.value = true
      winePopupTitle.value = '补打寄存小票'
      console.log('补打寄存小票')
      break
    case '确认领取':
      btnForm.opType = 1
      btnForm.state = 3
      wineTouch.value = true
      winePopupTitle.value = '领取'
      break
    case '修改存酒':
      console.log(1);
      btnForm.opType = -2
      wineTouch.value = true
      winePopupTitle.value = '修改存酒'
      break
  }
}
// 按钮防误触弹窗
const wineTouch = ref(false)
const winePopupTitle = ref('') // 弹窗标题
const pageloading = ref(false)
const onConfirmTouch = () => {
  pageloading.value = true
  console.log(btnForm);
  if (btnForm.opType === 1) {
    const OpWineStore = Api.Common.AppObjProcess.Do({
      functionName: 'OpWineStore',
      contentData: btnForm
    })
      .then(res => {
        showToast(res.result)
        wineTouch.value = false
        loadData(true)
        getWineStoreTakeStat()
        pageloading.value = false
      })
      .catch(err=>{
        pageloading.value = false
      })

  }
  if (btnForm.opType === -1) { // 补打寄存小票
    const OpWineStore = Api.Common.AppObjProcess.Do({
      functionName: 'printWineStoreReceipt',
      contentData: btnForm
    })
      .then(res => {
        pageloading.value = false
        showToast(res.result)
        wineTouch.value = false

      }).catch(err=>{
        pageloading.value = false
      })

  }
  if (btnForm.opType === -2) { // 修改存酒 
    // console.log(btnForm.itemCode);
    // return
    router.push({
      path: '/save',
      query: {
        redirect: '/onwine',
        itemCode: btnForm.itemCode
      }
    })
    pageloading.value = false

  }
}
// ------------------------------------------------------过期日期-------------------------------------------------------
// 选中日期
// const columnsType = ['year', 'month', 'day']
// const timeText = ref('2024-01-24')
// const timeShow = ref(false)
// const currentDate = ref(['01', '01'])
// const onConfirm = () => {
//   console.log(currentDate.value)
//   timeText.value = dayjs(currentDate.value).format('YYYY-MM-DD')
//   timeShow.value = false
// }
// const onCancel = () => {
//   timeShow.value = false
// }
// const confirmOn = value => {
//   timeShow.value = false
//   console.log(timeText.value)
// }
//存取订单表单
const postForm = reactive({
  keyWord: '',
  pageIndex: 1,
  pageSize: 15,
  state: '0'
})
// 寄存统计表单
const WineStoreStatForm = reactive({
  keyWord: '',
  beginTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  endTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
  pageIndex: 1,
  pageSize: 15
})

// 回收订单表单
const recycleStoreStatForm = reactive({
  keyWord: '',
  pageIndex: 1,
  pageSize: 15
})
// 回收统计表单
const returnForm = reactive({
  beginDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  endDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
  pageIndex: 1,
  pageSize: 15
})
//------------------------------------------------------图片预览--------------------------------------------------------------------
const OnShowImage = val => {
  images.value = [] // 清空图片数组
  if (!Info.value[val].attachment) {
    showToast('该订单没有图片')
    return
  }
  let arr = Info.value[val].attachment.split(',') // 切割字符串成数组
  // let newArr = arr.map(item => import.meta.env.VITE_DOMAIN + item) // 给每个元素拼接路径
  Array.prototype.push.apply(images.value, arr) // 添加到图片数组
  showImage.value = true // 展示图片
}
const showImage = ref(false)
const index = ref(0) // 第几张图片
const images = ref([]) // 图片数组
const onChange = newIndex => {
  index.value = newIndex
}
//------------------------------------------------------寄存统计时间筛选--------------------------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  // selected === '寄存统计' || selected === '回收统计'"
  if (selected.value === '寄存统计') {
    WineStoreStatForm.beginTime = startTime
    WineStoreStatForm.endTime = endTime
  } else if (selected.value === '回收统计') {
    returnForm.beginDate = startTime
    returnForm.endDate = endTime
  }
  loadData(true)
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    WineStoreStatForm.pageIndex = 1
    returnForm.pageIndex = 1
    WineRecoveryRecordData.value.pageIndex = 1
    WineRecoveryRecordList.value = []
    Info.value = []
    Info2.value = []
    Info3.value = []
    finished.value = false
  }
  loading.value = true
  if (selected.value === '存取订单') {
    const resp = Api.Common.AppObjProcess.Do({
      functionName: 'getWineStoreTakeList',
      contentData: postForm
    })
      .then(res => {
        const nowList = res.result
        if (refresh === true) {
          if (nowList.length !== postForm.pageSize) {
            finished.value = true
          }
        }
        Array.prototype.push.apply(Info.value, nowList)
        console.log(Info.value);
        if (nowList.length > 0) {
          postForm.pageIndex++
        } else {
          finished.value = true
        }
        loading.value = false
        if (refresh === true) {
          initBs.value++
        }
      })

  } else if (selected.value === '寄存统计') {
    const resp = Api.Common.AppObjProcess.Do({
      functionName: 'getWineStoreStat',
      contentData: WineStoreStatForm
    })
      .then(res => {
        const nowList = res.result

        if (refresh === true) {
          if (nowList.length !== WineStoreStatForm.pageSize) {
            finished.value = true
          }
        }
        nowList.forEach(item => {
          let arr = item.goodsAttachment.split(',') // 切割字符串成数组
          console.log(arr);
          // let newArr = arr.map(obj => import.meta.env.VITE_DOMAIN + obj) // 给每个元素拼接路径
          item.imgs = arr
        })
        // Array.prototype.push.apply(images.value, newArr) // 添加到图片数组
        Array.prototype.push.apply(Info2.value, nowList)

        if (nowList.length > 0) {
          WineStoreStatForm.pageIndex++
        } else {
          finished.value = true
        }
        loading.value = false
        if (refresh === true) {
          initBs.value++
        }
      })

  } else if (selected.value === '回收统计') {
    // return
    const resp = Api.Common.AppObjProcess.Do({
      functionName: 'GetRecoveryWineStat',
      contentData: returnForm
    })
      .then(res => {
        console.log('查询回收统计 :>> ', res);
        const nowList = res.result

        if (refresh === true) {
          if (nowList.length !== returnForm.pageSize) {
            finished.value = true
          }
        }
        // nowList.forEach(item => {
        //   let arr = item.goodsAttachment.split(',') // 切割字符串成数组
        //   console.log(arr);
        //   // let newArr = arr.map(obj => import.meta.env.VITE_DOMAIN + obj) // 给每个元素拼接路径
        //   item.imgs = arr
        // })
        // Array.prototype.push.apply(images.value, newArr) // 添加到图片数组
        Array.prototype.push.apply(Info3.value, nowList)

        if (nowList.length > 0) {
          returnForm.pageIndex++
        } else {
          finished.value = true
        }
        loading.value = false
        if (refresh === true) {
          initBs.value++
        }
      })

  }  else if (selected.value === '回收订单') {
          WineRecoveryRecordData.value.State = stateActive.value
          const resp = Api.Common.AppObjProcess.Do({
          functionName: 'GetWineRecoveryRecordList',
          contentData: WineRecoveryRecordData.value
        })
          .then(res => {
            console.log('查询回收统计 :>> ', res);
            const nowList = res.result

            if (refresh === true) {
              if (nowList.length !== WineRecoveryRecordData.value.pageSize) {
                finished.value = true
              }
            }
          
            Array.prototype.push.apply(WineRecoveryRecordList.value, nowList)

            if (nowList.length > 0) {
              WineRecoveryRecordData.value.pageIndex++
            } else {
              finished.value = true
            }
            loading.value = false
            if (refresh === true) {
              initBs.value++
            }
          })
   }
}
// -----------------------------------------------------获取头部汇总--------------------------------------------------
const getWineStoreTakeStat = () => {

  Api.Common.AppObjProcess.Do({
    functionName: 'getWineStoreTakeStat',
    contentData: {}
  }).then(res => {
    allShow.value = res
  })
}

// ------------------------------容量弹框------------------------------
// 容量 选项组
const capacityColumns = ref([{ text: "全部", value: "" }, { text: "整瓶", value: "2" }, { text: "非整瓶", value: "1" }, { text: "空瓶", value: "0" }])

let capacityObj = ref({ text: '容量' })
const capacityShow = ref(false)
// 弹窗确定按钮
const onWaiterConfirm = function (ev, type) {
  capacityObj.value = ev.selectedOptions[0]
  const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
  returnForm.userName = opt.text
  returnForm.fullType = opt.value
  console.log('returnForm :>> ', returnForm);
  capacityShow.value = false
  loadData(true)
}


//----------------------------------------------------回收订单--------------------------------------------------
const WineRecoveryRecordList = ref([])
const WineRecoveryRecordData = ref({
    roomName: '',
    roomCode: '',
    pageSize: '',
    pageIndex: '',
    goodsName: '',
    beginRecoveryDate: '',
    endRecoveryDate: '',
    recoveryUser: '',
    operType: '',
    // 回收类型 0：空瓶 1：非整瓶 2:整瓶
})
const stateActive = ref(0)
const stateList = ref([
    {
      name:'审核'
    },
    {
      name:'已审核'
    },
    {
      name:'已拒绝'
    },
])

const onCheck = (k)=> {
  stateActive.value = k
  loadData(true)
}


//获取回收列表
const GetWineRecoveryRecordList = (state)=>{
      Api.Common.AppObjProcess.Do({functionName: 'GetWineRecoveryRecordList',contentData: WineRecoveryRecordData.value}).then(res => {
        WineRecoveryRecordList.value = res.result
        console.log(WineRecoveryRecordList.value,'回收订单查询---')
      })
}

//审核操作
const opcoveWineState = (code,type) => {
    let params = {
            "coveryCode":code,
             "state": type 
    }
    WineRecoveryRecordData.value.pageIndex = 1

    Api.Common.AppObjProcess.Do({functionName: 'OpCoveryWineState',contentData: params}).then(res => {
        //  GetWineRecoveryRecordList(true)
        loadData(true)
     })
}


// -----------------------------------------------------初始化--------------------------------------------------
const onInit = () => {
  loadData(true)
  // setTimeout(()=>{
  getWineStoreTakeStat()
  // },3000)
}
onInit()
// onMounted(()=>{
//   getWineStoreTakeStat()
// })
</script>

<style scoped lang="scss">
@import '@/styles/l.scss';

.onWine-container {

  // height: 500px;
  // overflow: auto;
  .onWine-container-title {
    line-height: 16px;
    font-size: 16px;
    color: #cccccc;
    border-bottom: 1px solid #383840;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 62px 0;

    .onWine-title-indent {
      padding-bottom: 12px;
    }

    .onWine-title-all {
      padding-bottom: 12px;
    }

    .active {
      font-size: 16px;
      line-height: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffaa00;
      position: relative;
    }

    .active::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 2px;
      background: #ffaa00;
    }
  }

  .onWine-container-state_mar {
    padding: 10px 12px 0 12px;

    .onWine-container-state {
      // margin: 10px 12px 0 12px;
      padding: 12px;
      background: #28282e;
      border-radius: 8px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;

      .onWine-state-item {
        background: #404047;
        border-radius: 4px;
        padding: 24px 10px 0;
        flex-basis: calc((100% - 24px) / 3);
        text-align: center;
        margin-bottom: 12px;

        .state-item-value {
          line-height: 24px;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }

        .state-item-title {
          margin-top: 20px;
          margin-bottom: 24px;
          line-height: 14px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
        }

        .state-item-allDelay {
          margin-top: 15px;
          margin-bottom: 18px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          line-height: 14px;
          color: #ffdd99;
          padding: 5px 0px;
          border-radius: 2px;
          border: 1px solid #ffdd99;
        }

        &.active {
          border: 1px solid #ffdd99;
          margin-bottom: 10px;

          .state-item-value {
            line-height: 24px;
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffaa00;
          }

          .state-item-title {
            line-height: 14px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffdd99;
          }
        }
      }

      .onWine-state-all {
        margin: 0px auto;
        width: 100%;
        text-align: center;
        background: #404047;
        border-radius: 4px;
        padding: 13px 0;
        line-height: 16px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;

        &.activeAll {
          background: #ffaa00;
          color: #ffffff;
        }
      }
    }
  }

  .onWine-container-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;

    .onWine-center-time {
      line-height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
    }

    .onWine-center-timeText {
      background: #28282e;
      border-radius: 4px;
      line-height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      position: relative;
      padding: 11px 30px 11px 10px;

      .time-icon {
        width: 6px;
        height: 11px;
        position: absolute;
        transform: rotate(90deg);
        right: 10px;
        top: 12px;
        background-image: url('@/assets/svg/common/v_triangle_right_white.svg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }

    .onWine-center-item {
      background: #5c5c66;
      border-radius: 4px;
      line-height: 14px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      padding: 8px 12px;
    }
  }

  .onWine-container-search {
    ::v-deep(.z-search__input) {
      width: 240px;
    }
  }

  .onWine-container-main1 {
    padding: 0 12px;

    .onWine-main-item {
      background: #28282e;
      border-radius: 8px;
      margin-bottom: 10px;

      .item-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 17px 12px;
        border-bottom: 1px solid #383840;

        .item-title-name {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 18px;
        }

        .item-title-state {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 13px;

          &.active {
            color: #ffaa00;
          }

          &.active1 {
            color: #ff3333;
          }
        }
      }

      .item-wine {
        padding: 10px 24px;

        .item-wine-top {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #fefefe;
          line-height: 14px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 8px;

          .item-wine-name {}

          .item-wine-num {}
        }

        .item-wine-below {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #999999;
          line-height: 12px;
        }
      }

      ul {
        padding: 12px 0px 0 0;
        margin: 0 24px;
        border-top: 1px solid #383840;

        li {
          list-style: none;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 12px;

          .item-left {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            line-height: 14px;
          }

          .item-right {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 14px;
          }

          .item-photo {
            position: relative;
          }

          .item-photo-look {
            position: absolute;
            right: 36px;
            border: 1px solid #ffaa00;
            padding: 4px 9px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffaa00;
            line-height: 12px;
            border-radius: 2px;
          }
        }
      }

      .item-footer {
        border-top: 1px solid #383840;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 14px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        div {
          margin-left: 10px;
          background: #5c5c66;
          border-radius: 4px;
        }

        .item-footer-two {
          padding: 8px 27px;
        }

        .item-footer-four {
          padding: 8px 12px;
        }

        .item-footer-six {
          padding: 8px 9px;
        }
      }
    }
  }

  .records-container-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    margin-bottom: 10px;

    .container-header-item {
      position: relative;
      background: #3d3d4c;
      border-radius: 4px;
      padding: 9px 26px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 14px;

      &.active {
        color: #ffffff;
        background: #ffaa00;
      }

      .header-select-icon {
        width: 10px;
        height: 100%;
        position: absolute;
        right: 12px;
        top: 0;
        background-image: url('@/assets/svg/open/v_open_triangle.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 10px 6px;
      }
    }
  }

  .records-container-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 10px;

    .container-time-item {
      background: #262626;
      border-radius: 4px;
      padding: 11px 18px 10px 18px;
      font-size: 12px;
      line-height: 12px;
    }

    .container-time-center {
      font-size: 12px;
      line-height: 12px;
      align-self: center;
    }
  }

  .onWine-container-main2 {
    padding: 0 12px;

    .onWine-main-item {
      background: #28282e;
      border-radius: 8px;
      margin-bottom: 10px;
      padding: 12px;

      .item-title {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        ::v-deep(.van-image__img) {
          border-radius: 4px;
        }

        .item-zimage {
          border-radius: 4px;
          margin-right: 10px;
        }

        .item-title-right {
          .title-right-name {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            line-height: 16px;
          }
        }
      }

      .item-center {
        padding-bottom: 20px;
        display: flex;
        align-items: center;

        &.padTop {
          padding-top: 0px !important;
        }

        .title-right-state {
          width: 40px;
          text-align: center;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #8ae65c;
          line-height: 12px;
          padding: 3px 0px;
          background: #454d41;
          border-radius: 2px;
        }

        .title-right-stateBelow {
          width: 40px;
          text-align: center;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #B8E55C;
          line-height: 12px;
          padding: 3px 0px;
          background: #494D41;
          border-radius: 2px;
        }

        .item-center-title {
          padding-left: 6px;
          line-height: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #999999;
        }

        .item-center-value {
          line-height: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 14px;
          color: #FFAA00;
        }
      }

      .item-value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 23px;

        .item-value-block {
          text-align: center;

          .item-value-num {
            line-height: 14px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 12px;
          }

          .item-value-name {
            line-height: 12px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
          }
        }

        .png-line {
          width: 1px;
          height: 30px;
          background-image: url('@/assets/images/onwine/i_onwine-line.png');
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
        }
      }
    }
  }

  .onWine-container-main3 {
    padding: 0 12px;

    .onWine-main-item {
      background: #28282e;
      border-radius: 8px;
      margin-bottom: 10px;
      padding: 12px;
      display: flex;

      .onwine-img {
        width: 60px;
        height: 60px;
      }

      .onWine-main-right-box {
        margin-left: 12px;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .onWine-title {
          font-size: 16px;
        }

        .onWine-content-box {
          display: flex;
          align-items: center;

          .type {
            width: 40px;
            height: 18px;
            background: #454D41;
            border-radius: 2px;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 12px;
            color: #8AE55C;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
          }
          .num_size {
            font-size: 16px;
          }
        }
      }
    }
  }
}

.recycle-container {
  width: 100%;
  background: #28282e;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 20px;
  .flex-bwt {
    display: flex;
    justify-content: space-between;
    .time {
      font-size: 16px;
      color: #999;
    }
    .status {
      font-size: 16px;
      color: #fff;
    }
  }
  .M01 {
    font-size: 16px;
    margin-top: 10px;
    color: #fff;
  }
  .prductName1 {
      font-size: 16px;
      color: #999;
    }
     .unti {
      font-size: 16px;
      color: #fff;
    }
  .flex-js-felx {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
 
   
  }
  .recyName {
    margin-top: 10px;
    font-size: 16px;
    color: #999;
  }
  .recyImg {
    margin-top: 20px;
    width: 100px;
    height: 80px;
    margin-bottom: 20px;
  }
  .item-footer {
        padding-top: 20px;
        border-top: 1px solid #383840;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        div {
          margin-left: 10px;
          background: #5c5c66;
          border-radius: 4px;
        }

        .item-footer-two {
          padding: 8px 27px;
        }

      }
}

.popup-container {
  padding: 30px 24px 20px;

  .popup-main {
    .popup-main-extension {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
      margin-bottom: 27px;
    }

    .popup-main-extensionDay {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin-bottom: 30px;
    }

    .popup-item-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
      margin-right: 10px;
    }

    .popup-item-icon {
      position: absolute;
      right: 15px;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
    }

    ::v-deep(.van-field) {
      padding: 0;
      width: 180px;
      background: #5c5c66;
      border-radius: 4px;
    }

    ::v-deep(.van-field__control) {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
      padding: 10px 0 10px 12px;
      background: #5c5c66;
    }

    ::v-deep(.van-field__body) {
      background: #5c5c66;
    }

    ::v-deep(.van-cell:after) {
      display: none;
    }
  }

  .popup-footer {
    .button-group {
      display: flex;
      justify-content: space-between;
    }
  }
}

.records-container-header {
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;

        .container-header-item {
            background: #3d3d4c;
            border-radius: 4px;
            padding: 9px 17px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 14px;
            cursor: pointer;
            &.noadmin{
                width: 22%;
                text-align: center;
            }
            &.active {
                color: #ffffff;
                background: #ffaa00;
            }
        }

        .container-header-custom {
            position: relative;
            background: #3d3d4c;
            border-radius: 4px;
            padding: 9px 22px 9px 10px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 14px;
            cursor: pointer;

            &.active {
                color: #ffffff;
                background: #ffaa00;
            }

            .header-select-icon {
                width: 10px;
                height: 100%;
                position: absolute;
                right: 9px;
                top: 0;
                background-image: url('@/assets/svg/open/v_open_triangle.svg');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 10px 6px;
            }
        }
  }

::v-deep(.van-image__error) {
  border-radius: 4px;
}

::v-deep(.van-icon__image) {
  border-radius: 4px;
}

:deep(.van-picker__toolbar) {
  background-color: #45454d;
}

::v-deep(.van-picker__columns) {
  background-color: #45454d;
}

::v-deep(.van-picker-column) {
  background-color: #45454d;
}

:deep(.van-picker-column__item) {
  color: #ffffff;
}

:deep(.van-picker-column__item--selected) {
  color: #ffaa00;
}

:deep(.van-picker__mask) {
  background: transparent;
}

:deep(.van-hairline-unset--top-bottom) {
  &:after {
    border-color: #505059;
  }
}

:deep(.van-picker__confirm) {
  font-size: 16px;
  color: #ffaa00;
  padding: 0 30px;
}

:deep(.van-picker__cancel) {
  font-size: 16px;
  color: #999999;
  padding: 0 30px;
}

:deep(.van-picker__title) {
  font-size: 18px;
  color: #ffffff;
}

:deep(.van-picker) {
  background-color: transparent;
}

:deep(.van-tabs__nav) {
  background-color: transparent;
}

:deep(.van-tab) {
  color: #cccccc;

  &.van-tab--active {
    color: #ffaa00;
  }
}

:deep(.van-tabs__line) {
  background-color: #ffaa00;
}

:deep(.van-picker__toolbar) {
  border-bottom: 1px solid #505059;
}

:deep(.van-picker-group__tab-title) {
  margin-right: 0;
}


.performance-container-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #222226;
  padding: 10px 12px;
  margin: 0px 0 10px;

  .select-item {
    width: 111px;
    position: relative;
    border: 1px solid #999999;
    border-radius: 4px;
    line-height: 14px;
    padding: 8px 0px 8px 11px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #cccccc;

    .select-item-icon {
      position: absolute;
      right: 12px;
      top: 13px;
      width: 11px;
      height: 6px;
      background-image: url('@/assets/svg/common/v_triangle_bottom_white.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }
}

.color-FFAA00 {
  color: #FFAA00;
}
</style>
